import React from 'react';
import { Card, Row, Col, Statistic, Button, Space } from 'antd';
import {
  UserOutlined,
  TeamOutlined,
  PhoneOutlined,
  FileTextOutlined,
  DollarOutlined,
  TrophyOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const CRMDashboard: React.FC = () => {
  const navigate = useNavigate();

  // 模拟统计数据
  const statistics = {
    totalCustomers: 1234,
    totalContacts: 567,
    totalBusinesses: 89,
    totalContracts: 45,
    totalRevenue: 2580000,
    monthlyGrowth: 12.5
  };

  const quickActions = [
    {
      title: '客户管理',
      icon: <UserOutlined />,
      path: '/crm/customer',
      description: '管理客户信息、跟进记录'
    },
    {
      title: '商机管理',
      icon: <TrophyOutlined />,
      path: '/crm/business',
      description: '跟踪销售机会、管理销售流程'
    },
    {
      title: '联系人管理',
      icon: <TeamOutlined />,
      path: '/crm/contact',
      description: '维护联系人信息、沟通记录'
    },
    {
      title: '合同管理',
      icon: <FileTextOutlined />,
      path: '/crm/contract',
      description: '合同签署、执行跟踪'
    }
  ];

  return (
    <div style={{ padding: '24px' }}>
      {/* 统计卡片 */}
      <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
        <Col xs={24} sm={12} md={8} lg={6} xl={4}>
          <Card>
            <Statistic
              title="客户总数"
              value={statistics.totalCustomers}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6} xl={4}>
          <Card>
            <Statistic
              title="联系人总数"
              value={statistics.totalContacts}
              prefix={<TeamOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6} xl={4}>
          <Card>
            <Statistic
              title="商机总数"
              value={statistics.totalBusinesses}
              prefix={<TrophyOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6} xl={4}>
          <Card>
            <Statistic
              title="合同总数"
              value={statistics.totalContracts}
              prefix={<FileTextOutlined />}
              valueStyle={{ color: '#fa8c16' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6} xl={4}>
          <Card>
            <Statistic
              title="总收入"
              value={statistics.totalRevenue}
              prefix={<DollarOutlined />}
              precision={0}
              formatter={(value) => `¥${value?.toLocaleString()}`}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6} xl={4}>
          <Card>
            <Statistic
              title="月增长率"
              value={statistics.monthlyGrowth}
              precision={1}
              suffix="%"
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 快捷操作 */}
      <Card title="快捷操作" style={{ marginBottom: '24px' }}>
        <Row gutter={[16, 16]}>
          {quickActions.map((action, index) => (
            <Col xs={24} sm={12} md={8} lg={6} key={index}>
              <Card
                hoverable
                style={{ textAlign: 'center', height: '160px' }}
                onClick={() => navigate(action.path)}
              >
                <div style={{ fontSize: '32px', color: '#1890ff', marginBottom: '12px' }}>
                  {action.icon}
                </div>
                <h3 style={{ marginBottom: '8px' }}>{action.title}</h3>
                <p style={{ color: '#666', fontSize: '12px', margin: 0 }}>
                  {action.description}
                </p>
              </Card>
            </Col>
          ))}
        </Row>
      </Card>

      {/* 最近活动 */}
      <Row gutter={[16, 16]}>
        <Col xs={24} lg={12}>
          <Card title="最近客户" extra={<Button type="link">查看更多</Button>}>
            <div style={{ minHeight: '200px' }}>
              <p style={{ color: '#999', textAlign: 'center', marginTop: '80px' }}>
                暂无数据
              </p>
            </div>
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card title="最近商机" extra={<Button type="link">查看更多</Button>}>
            <div style={{ minHeight: '200px' }}>
              <p style={{ color: '#999', textAlign: 'center', marginTop: '80px' }}>
                暂无数据
              </p>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default CRMDashboard;